<template>
    <el-container class="layout-container">
        <el-aside width="200px">
            <el-menu active-text-color="#ffd04b" background-color="#232323" text-color="#fff" @select="handleSelect">
                <el-menu-item index="1">
                    <el-icon>
                        <Management />
                    </el-icon>
                    <span>视频1</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <el-icon>
                        <Management />
                    </el-icon>
                    <span>视频2</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <el-icon>
                        <Management />
                    </el-icon>
                    <span>视频3</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <el-icon>
                        <Management />
                    </el-icon>
                    <span>视频4</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main>
            <img class="video-stream" :key="videoKey" :src="videoSrc" />
        </el-main>
    </el-container>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const videoSrc = ref('http://127.0.0.1:8000/actions/1');
const videoKey = ref(0);

const handleSelect = (key, keyPath) => {
    switch (key) {
        case '1':
            videoSrc.value = 'http://127.0.0.1:8000/actions/1';
            break;
        case '2':
            videoSrc.value = 'http://127.0.0.1:8000/actions/2';
            break;
        case '3':
            videoSrc.value = 'http://127.0.0.1:8000/actions/3';
            break;
        case '4':
            videoSrc.value = 'http://127.0.0.1:8000/actions/4';
            break;
        default:
            ElMessage.error('无效的视频源');
    }
    // 切换视频源后更新 key 以强制刷新
    videoKey.value++;
};
</script>

<style scoped>
.layout-container .el-aside {
    background-color: #232323;
}

.el-menu {
    border-right: none;
}

.el-main {
    padding: 0;
    height: 550px;
}

.video-stream {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 4px; */
}
</style>
